{% include "header.tpl" %}
<script type="text/javascript">
window.onload = function () {
    // goals - get layout definition from controller, get toolbar from static file with ajax call
    // to pull dynamic menus

    var base = new dhtmlXLayoutObject('container', '2U', 'dhx_skyblue');
		base.cont.obj._offsetTop = 60;
		base.cont.obj._offsetLeft = 30;
		//Tried to make the columns taller. Also, I noticed that windows can't be used with layout? 
		// http://docs.dhtmlx.com/doku.php?id=dhtmlxlayout:dhtmlxlayout_dhtmlx_integration#components_which_you_can_put_into_layout
    base.cells("a").setHeight(600);
    base.cells("b").setHeight(600);
    base.cells("b").setWidth(400);
    base.cells("a").hideArrow();
    base.cells("b").hideArrow();
    
    var text = base.cells("a").setText("Widgets");
    var text = base.cells("b").setText("Info");

    var toolbar = base.attachToolbar();
    toolbar.setIconsPath("images/");
    toolbar.setIconSize(48);

    // adding a home link for default
    toolbar.addButton('home', 'Home', 'Home');
    toolbar.setItemImage('home', 'Home.png');
    toolbar.setItemToolTip('home', 'Home');
    toolbar.attachEvent("onClick", function(id) {
        menuButtons(id);
    });

    // build the menus dynamically from ajax call to controller
    $.getJSON('core/getMenu', function(data) {
        $.each(data, function(key, value) {
            buildToolbar(value, toolbar);
        })
    })

		// setup widget windows
		var windows = new dhtmlXWindows();
		windows.setImagePath('css/imgs/');

		var win1 = windows.createWindow('latest', 34, 150, 220);
		windows.window('latest').setText('Latest Changes');
		windows.window('latest').setDimension(398, 220);

		var win2 = windows.createWindow('win2', 436, 150, 220);
		windows.window('win2').setText('Total Bugs');
		windows.window('win2').setDimension(398, 220);

		var win3 = windows.createWindow('win3', 34, 373, 248);
		windows.window('win3').setText('Commits by User');
		windows.window('win3').setDimension(597, 248);

		var win4 = windows.createWindow('win4', 634, 373, 248);
		windows.window('win4').setText('Calendar');
		windows.window('win4').setDimension(198, 248);
		win4.attachObject('w4');

		/* widget calendar */
		var Cal = new dhtmlXCalendarObject('w4');
		Cal.show();
		
}
</script>
</head>
<body>
    <div id="header">
        <span id='header_text'>Encompass</span>
        <br />
        <span id='tagline'>Project Management</span>
    </div>
    <div id="container">
        <div id='w1'></div>
        <div id='w2'></div>
        <div id='w3'></div>
        <div id='w4'></div>
    </div>

